<template>
  <!--计数器-->
  <div class="input-count-box">
    <div class="input-count-title">
      <p v-text="title"></p>
    </div>
    <div class="input-count">
      <div class="input-count-reduce" @click="readOnly ? null: reduce()">-</div>
      <div class="input-count-value">
        <input
          :value="value"
          type="text"
          :disabled="readOnly"
          :placeholder="placeholder"
          @input="inputChange"
          autocomplete="off">
      </div>
      <div class="input-count-plus" @click="readOnly ? null: plus()">+</div>
    </div>
  </div>
</template>

<script>
    export default {
        props: {
            value:{
                type: Object,
                default: () => 0
            },
            title:{
                type: String,
                default: () => "计数器"
            },
            step:{
                type: Number,
                default: () => 2
            },
            readOnly:{
                type: Boolean,
                default: () => false
            },
            placeholder:{
                type: String,
                default: () => "数值"
            },
        },
        methods: {
            reduce() {
                this.value -= this.step
                this.$emit("input", this.value);
            },
            plus() {
                this.value -= -this.step
                this.$emit("input", this.value);
            },
            inputChange(e) {
                this.$emit("input", e.target.value);
            }
        }
    }
</script>

<style scoped>
  input, input:focus {
    background: none;
    outline: none;
    border: none;
  } input[type="password"]::-ms-reveal{
      display:none
    }
  .input-count-box {
    width: 100%;
    height: 30px;
    margin: 15px auto;
    overflow: hidden;
  }
  .input-count-title {
    cursor: default;
    float: left;
    width: 20%;
    height: 100%;
    line-height: 30px;
    font-size: 14px;
    letter-spacing: 1.5px;
  }
  .input-count-title p {
    width: 100%;
    margin: 0 0;
    text-align: center;
    color: rgba(255, 255, 255,0.5);
  }
  .input-count {
    cursor: pointer;
    float: left;
    position: relative;
    width: 55%;
    height: 25px;
    margin-top: 1.5px;
    border: 1px solid #2b313e;
    border-radius: 3px;
    background-color: #222833; /*背景颜色*/
  }
  .input-count-reduce {
    user-select:none;
    cursor: pointer;
    float: left;
    width: 20%;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 18px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    color: rgba(255, 255, 255,0.2);
    background-color: #272d38;
  }
  .input-count-reduce:hover {
    color: rgba(255, 255, 255,0.4);
    background-color: #2c323b;
  }
  .input-count-reduce:active {
    background-color: #30353d;
  }
  .input-count-value {
    cursor: pointer;
    float: left;
    width: 60%;
    height: 25px;
  }
  .input-count-value input {
    cursor: pointer;
    padding: 0 25%;
    width: 50%;
    height: 24px;
    color: rgba(255, 255, 255,0.5);
    line-height: 25px;
    text-align: center;
    font-size: 14px;
  }
  .input-count-plus {
    user-select:none;
    cursor: pointer;
    float: right;
    width: 20%;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 18px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    color: rgba(255, 255, 255,0.2);
    background-color: #272d38;
  }
  .input-count-plus:hover {
    color: rgba(255, 255, 255,0.5);
    background-color: #2c323b;
  }
  .input-count-plus:active {
    color: rgba(255, 255, 255,0.5);
    background-color: #30353d;
  }
</style>
